/*
 * @Author: zhangzhen
 * @Date: 2023-01-04 15:11:48
 * @LastEditors: zhangzhen
 * @LastEditTime: 2023-03-15 19:07:14
 *
 */
import React, {useContext} from 'react';
import {Col, DatePicker, Select} from 'antd';
import moment from 'moment';
import styles from './styles.module.scss';
import {FormContext} from '../../context';
import BasicOperate from './BasicOperate';

const DatePickerNew: any = DatePicker;
const RangePicker: any = DatePicker.RangePicker;

const DateAndRangePickerOperate = () => {
    const {
        currentItem,
        currentIndex,
        formConTextValue,
        setFormConTextValue,
        setCurrentItem,
        formRef,
    } = useContext(FormContext);

    // 设置值
    const setValue = (key: string, value: any) => {
        const cloneValue = [...formConTextValue];
        cloneValue[currentIndex][key] = value;
        setFormConTextValue(cloneValue);
        setCurrentItem(cloneValue[currentIndex]);
    };

    return (
        <div className={styles.inputOperate}>
            <div className={styles.currentName}>
                {currentItem.key === 'rangePicker' ? '日期范围' : '日期选择'}
            </div>

            {/* 公共配置项 */}
            <BasicOperate>
                {/* 初始值 */}
                <Col span={24}>
                    <div className={styles.operateItem}>
                        <span
                            className={
                                currentItem.dateType === 'hms'
                                    ? styles.itemNameDate
                                    : styles.itemName
                            }>
                            默认值:
                        </span>
                        {currentItem.key === 'rangePicker' && (
                            <RangePicker
                                format={currentItem.format}
                                picker={currentItem.picker}
                                showTime={currentItem.showTime}
                                value={
                                    currentItem.defaultValue
                                        ? [
                                            moment(
                                                currentItem.defaultValue[0],
                                            ),
                                            moment(
                                                currentItem.defaultValue[1],
                                            ),
                                        ]
                                        : null
                                }
                                onChange={(value: any) => {
                                    setValue(
                                        'defaultValue',
                                        value
                                            ? [
                                                value[0].format(
                                                    currentItem.format,
                                                ),
                                                value[1].format(
                                                    currentItem.format,
                                                ),
                                            ]
                                            : null,
                                    );
                                    formRef?.setFieldValue(
                                        currentItem.name,
                                        value,
                                    );
                                }}
                            />
                        )}
                        {currentItem.key === 'datePicker' && (
                            <DatePickerNew
                                format={currentItem.format}
                                picker={currentItem.picker}
                                showTime={currentItem.showTime}
                                value={
                                    currentItem.defaultValue
                                        ? moment(currentItem.defaultValue)
                                        : null
                                }
                                onChange={(value: any) => {
                                    setValue(
                                        'defaultValue',
                                        value
                                            ? value.format(currentItem.format)
                                            : null,
                                    );
                                    formRef?.setFieldValue(
                                        currentItem.name,
                                        value,
                                    );
                                }}
                            />
                        )}
                    </div>
                </Col>
                {/* 日期格式 */}

                <Col span={24}>
                    <div className={styles.operateItem}>
                        <span className={styles.itemName}>日期格式:</span>
                        <Select
                            value={currentItem.dateType || 'date'}
                            options={[
                                {label: '年月', value: 'month'},
                                {label: '年月日', value: 'date'},
                                {
                                    label: '年月日时分',
                                    value: 'hm',
                                },
                                {
                                    label: '年月日时分秒',
                                    value: 'hms',
                                },
                            ]}
                            onChange={(value) => {
                                const cloneValue = [...formConTextValue];
                                if (value === 'month' || value === 'date') {
                                    cloneValue[currentIndex].picker = value;
                                    cloneValue[currentIndex].format =
                                        value === 'month'
                                            ? 'YYYY-MM'
                                            : 'YYYY-MM-DD';
                                    cloneValue[currentIndex].showTime = null;
                                } else {
                                    cloneValue[currentIndex].picker = 'date';
                                    if (value === 'hm') {
                                        cloneValue[currentIndex].format =
                                            'YYYY-MM-DD HH:mm';
                                        cloneValue[currentIndex].showTime = {
                                            format: 'HH:mm',
                                        };
                                    } else {
                                        cloneValue[currentIndex].format =
                                            'YYYY-MM-DD HH:mm:ss';
                                        cloneValue[currentIndex].showTime = {
                                            format: 'HH:mm:ss',
                                        };
                                    }
                                }
                                setValue('dateType', value);
                                setCurrentItem(cloneValue[currentIndex]);
                                setFormConTextValue(cloneValue);
                            }}
                        />
                    </div>
                </Col>
            </BasicOperate>
        </div>
    );
};

export default DateAndRangePickerOperate;
